<script>
export default {
  data () {
    return {
      poi: [],
      poiName: '天安门',
      scrollType: 'scroll', // scroll  noroll 俩种类型
      placeholder: '请输入信息',
      inputMsg: '',
      taleList: [],
      tool: {
        callback: this.toolEvent
      },
      quickList: [
        { text: '这里是jwchat，您想了解什么问题。' },
        { text: 'jwchat是最好的聊天组件' },
        { text: '谁将烟焚散，散了纵横的牵绊；听弦断，断那三千痴缠。' },
        { text: '长夏逝去。山野间的初秋悄然涉足。' },
        { text: '江南风骨，天水成碧，天教心愿与身违。' },
        { text: '总在不经意的年生。回首彼岸。纵然发现光景绵长。' },
        { text: '外面的烟花奋力的燃着，屋里的人激情的说着情话' },
        { text: '假如你是云，我就是雨，一生相伴，风风雨雨；' },
        {
          text: '即使泪水在眼中打转，我依旧可以笑的很美，这是你学不来的坚强。'
        },
        { text: ' 因为不知来生来世会不会遇到你，所以今生今世我会加倍爱你。' }
      ],
      config: {
        historyConfig: {
          show: false,
          tip: '加载更多提示框,可以直接使用组件的',
          callback: this.bindLoadHistory
        }
      }
    }
  },
  mounted () {
    const _this = this
    _this
      .$http({
        method: 'get',
        url: '/poi/allPoi'
      })
      .then(function (response) {
        console.log(response)
        _this.poi = response.data.pois
      })
      .catch(function (error) {
        console.log(error)
      })
  },
  methods: {
    switchPOi (name) {
      this.poiName = name
      this.taleList = []
      this.webSocketObject.close()
      this.webSocketInit(name)
    },
    webSocketInit (poiNameParm) {
      const webSocketUrl = 'ws://localhost:8081/websocket/' + this.userName + '/' + poiNameParm
      this.webSocketObject = new WebSocket(webSocketUrl)
      this.webSocketObject.onopen = this.webSocketOnOpen
      this.webSocketObject.onmessage = this.webSocketOnMessage
      this.webSocketObject.onerror = this.webSocketOnError
      this.webSocketObject.onclose = this.webSocketOnClose
    },
    webSocketOnOpen (e) {
      console.log('与服务端连接打开->', e)
    },
    webSocketOnMessage (e) {
      console.log('来自服务端的消息->', e)
      const receiveMessage = JSON.parse(e.data)
      this.taleList.push(receiveMessage)
    },
    webSocketOnError (e) {
      console.log('与服务端连接异常->', e)
    },
    webSocketOnClose (e) {
      console.log('与服务端连接关闭->', e)
    },
    handleSendButton (e) {
      console.log(e)
      const msg = this.inputMsg
      const time = new Date()
      const datamsg =
        time.getFullYear() +
        '-' +
        (time.getMonth() + 1) +
        '-' +
        time.getDate() +
        ' ' +
        time.getHours() +
        ':' +
        time.getMinutes() +
        ':' +
        time.getSeconds()
      if (!msg) return
      const msgObj = {
        date: datamsg,
        text: { text: msg },
        mine: true,
        name: this.userName,
        img: 'https://tupian.qqw21.com/article/UploadPic/2021-1/20211722215388977.jpg'
      }
      this.taleList.push(msgObj)
      const msgObj1 = {
        date: datamsg,
        text: { text: msg },
        mine: false,
        name: this.userName,
        img: 'https://tupian.qqw21.com/article/UploadPic/2021-1/20211722215388977.jpg'
      }
      this.webSocketObject.send(JSON.stringify(msgObj1))
    }
  },
  created () {
    this.webSocketInit(this.poiName)
  },
  props: ['userName']
}
</script>
<template>
  <div class="content">
    <div class="left">
      <div
        v-for="item in poi"
        :key="item.id"
        style="
          font-family: cool;
          color: rgb(67, 66, 66);
          font-size: 22px;
          height: 70px;
          background-color: rgb(175, 174, 174);
          border-bottom: 0.5px solid black;
          text-align: center;
          line-height: 70px;
        "
        @click="switchPOi(item.name)"
      >
        <div class="spotName">{{ item.name }} →</div>
      </div>
    </div>
    <div class="right">
      <div
        style="
          background-color: rgb(159, 159, 159);
          color: white;
          position: absolute;
          top: 20px;
          left: 10px;
          z-index: 111111;
        "
      >
        当前地点：{{ poiName }}
      </div>
      <!-- <ChatWeb :poiName="poiName" :userName="userName"></ChatWeb> -->
      <JwChat
        v-model="inputMsg"
        :config="config"
        :taleList="taleList"
        :scrollType="scrollType"
        :toolConfig="tool"
        :placeholder="placeholder"
        :quickList="quickList"
        @enter="handleSendButton"
        width="100%"
        height="100%"
      >
      </JwChat>
    </div>
  </div>
</template>
<style lang="less" scoped>
.left {
  width: 15%;
  position: fixed;
  top: 80px;
  bottom: 0px;
  overflow: auto;
  cursor: pointer;
  .spotName:hover {
    color: rgb(100, 100, 242);
  }
}

.right {
  width: 85%;
  position: fixed;
  top: 80px;
  bottom: 0px;
  right: 0px;
}
</style>
